import React, { Component, ChangeEvent } from "react";

interface IState {
  xing: string;
  ming: string;
  [key: string]: any; // 一定要是前面的子集
}
interface IProps {}

export default class Controlled extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      xing: "",
      ming: "",
    };
  }
  changeInput = (e: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  render() {
    const { xing, ming } = this.state;
    return (
      <div>
        <label htmlFor="xing">
          姓:
          <input
            type="text"
            id="xing"
            value={xing}
            onChange={this.changeInput}
          />
        </label>
        <label htmlFor="ming">
          名:
          <input
            type="text"
            id="ming"
            value={ming}
            onChange={this.changeInput}
          />
        </label>
      </div>
    );
  }
}
